<template>
  <div>
    <el-dialog title="奖金池列表" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" append-to-body>
      <el-table
        v-loading="loading"
        :data="tableDataTwo"
        border
        style="width: 100%"
        ref="table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="60px"
        ></el-table-column>
        <el-table-column
          type="index"
          align="center"
          width="60px"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="jjxFl"
          align="center"
          label="奖金项分类"
        ></el-table-column>
        <el-table-column
          prop="jjxMc"
          align="center"
          label="奖金项名称"
        ></el-table-column>
        <el-table-column prop="jjcYe" align="center" label="使用金额(元)">
          <template slot-scope="scope">
            {{ $formatNum(scope.row.jjcYe) }}
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label="有效期至">
        <template slot-scope="scope">
          <div v-if="new Date(scope.row.gqTime).getTime() < new Date().getTime()">
            <span style="color: #C0C4CC">{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
          <div v-else-if="parseInt((new Date(scope.row.gqTime).getTime()-new Date().getTime())/ (1000 * 60 * 60 * 24)) <= 30">
            <span style="color: #F56C6C">{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
          <div v-else-if="parseInt((new Date(scope.row.gqTime).getTime()-new Date().getTime())/ (1000 * 60 * 60 * 24)) <= 60">
            <span style="color: #E6A23C">{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
          <div v-else>
            <span>{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
        </template>
      </el-table-column>
         <el-table-column
          prop="remark"
          align="center"
          label="备注"
        ></el-table-column> -->
      </el-table>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <el-col :span="24">
          <el-col :span="8" v-for="(item,index) in list">
              <span>{{item.jjxMc}}:</span>
              <el-input-number :key="isRef" v-model="item.jjJe" @change="changeJe(item,index)" style="width:60%;"></el-input-number>
          </el-col>
      </el-col>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submint"
          >确 定</el-button
        >
        <el-button @click="close">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
fetchList
} from "@/api/jiangjin/jiangjinjjcxxb"
import {
saveJjc
} from "@/api/jiangjin/jiangjinjjxxxb"
export default {
  data() {
    return {
      dialogVisible: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tableData: [],
      loading: false,
      multipleSelection: [],
      list:[],
      deptIds:"",
      isRef:true,
      cfLx:"",
      ids:[],
      tableDataTwo:[]
    };
  },
  methods: {
    init(jjDeptId,ids,cfLx){
        this.dialogVisible=true
        this.deptIds=jjDeptId
        this.cfLx=cfLx
        this.ids=ids
        this.getData()
    },
    handleSelectionChange(val) {
        this.list = val;
        console.log(JSON.stringify(this.list))
      //   var map = new Map();
      // for (var c in this.multipleSelection) {
      //   if (!map.has(this.multipleSelection[c].jjxId)) {
      //     map.set(this.multipleSelection[c].jjxId, {
      //       id: this.multipleSelection[c].jjcId,
      //       jjxId: this.multipleSelection[c].jjxId,
      //       jjxMc: this.multipleSelection[c].jjxName,
      //       jjJe: this.multipleSelection[c].jjcYe,
      //       jjcYe:this.multipleSelection[c].jjcYe
      //     });
      //   } else {
      //     var jjcYe = map.get(this.multipleSelection[c].jjxId).jjcYe;
      //     map.set(this.multipleSelection[c].jjxId, {
      //       id: this.multipleSelection[c].jjcId,
      //       jjxId: this.multipleSelection[c].jjxId,
      //       jjxMc: this.multipleSelection[c].jjxName,
      //       jjJe: this.multipleSelection[c].jjcYe + jjcYe,
      //       jjcYe:this.multipleSelection[c].jjcYe + jjcYe
      //     });
      //   }
      //    this.list = [...map.values()];
      //   //console.log(JSON.stringify(this.list))
      // }
    },
    changeJe(item,index){
      if(item.jjJe*1>item.jjcYe*1){
        this.$message.closeAll()
        this.$message.warning("金额不能超过剩余总金额!")
        this.list[index].jjJe=item.jjcYe
        this.isRef=!this.isRef
        this.$forceUpdate()
      }
    },
    submint(){
      var params={
        cfLx:this.cfLx,
        ids:this.ids.toString(),
        list:this.list
      }
      saveJjc(params).then(res=>{
        if(res.data.code==0){
          this.$message.closeAll()
          this.$message.success("保存成功!")
          this.$emit('bonusPoolsChild')
          this.close()
        }
      })
    },
    getData() {
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, {deptIds:this.deptIds})).then(res=>{
        if(res.data.data.records){
          this.tableData=res.data.data.records.filter(item=>{
              if(item.jjcZt==1){
                return item
              }
        })
        }
        this.totalPage=res.data.data.total
        var map = new Map();
      for (var c in this.tableData) {
        if (!map.has(this.tableData[c].jjxId)) {
          map.set(this.tableData[c].jjxId, {
            id: this.tableData[c].jjcId,
            jjxId: this.tableData[c].jjxId,
            jjxMc: this.tableData[c].jjxName,
            jjxFl: this.tableData[c].jjxFl,
            jjJe: this.tableData[c].jjcYe,
            jjcYe:this.tableData[c].jjcYe
          });
        } else {
          var jjcYe = map.get(this.tableData[c].jjxId).jjcYe;
          map.set(this.tableData[c].jjxId, {
            id: this.tableData[c].jjcId,
            jjxId: this.tableData[c].jjxId,
            jjxMc: this.tableData[c].jjxName,
            jjJe: this.tableData[c].jjcYe + jjcYe,
            jjcYe:this.tableData[c].jjcYe + jjcYe,
            jjxFl: this.tableData[c].jjxFl,
          });
        }
         this.tableDataTwo = [...map.values()];
      }
      })
    },
    close(){
      this.dialogVisible=false
      this.tableData=[]
      this.list=[]
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getData();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getData();
    },
  },
};
</script>

<style>
</style>
